<template>
    <div class="welcomeBody">
        <!-- welcome Start -->
            <p>
                <span>{{ admin }}</span>
                <span v-if="timeOfTheday[0]>=6 && timeOfTheday[0]<12">上午好！</span>
                <span v-else-if="timeOfTheday[0]>=12 && timeOfTheday[0]<14">中午好！</span>
                <span v-else-if="timeOfTheday[0]>=14 && timeOfTheday[0]<19">下午好！</span>
                <span v-else>晚上好！</span>欢迎回到主页！
                <span class="logTimes">{{ logTimehms }}</span>
                <span class="logDates">{{ logDate }}</span>
            </p>

            <span class="logTime">{{ logDate }}</span>
        <!-- welcome End -->

        <!-- 时间 Start -->
            <el-calendar v-model="theDate">
            </el-calendar>
        <!-- 时间 End -->

        <!-- list Start -->
        <el-transfer
            style="text-align: left; display: inline-block"
            v-model="value4"
            filterable
            :titles="['候选人', '参会者']"
            :button-texts="['到左边', '到右边']"
            :format="{
                noChecked: '${total}',
                hasChecked: '${checked}/${total}'
            }"
            @change="handleChange"
            :data="userlist">
            <span slot-scope="{ option }">{{ option.key }} - {{ option.label }}</span>
        </el-transfer>
        <!-- list End -->

    </div>
</template>

<script>
export default {
    data() {
        
        // const generateData = _ => {
        //     const data = [];
        //     for (let i = 1; i <= 15; i++) {
        //         data.push({
        //             key: i,
        //             label: `备选项 ${ i }`,
        //             disabled: i % 4 === 0
        //         });
        //     }
        //     return data;
        // };
        return {
            admin: 'admin',
            theDate: new Date(),
            logTimehms: '',
            logDate: '',
            timeOfTheday: [],
            // 用户列表数据
            userlist: [],
            total: 0,
            // data: generateData(),
            value: [1],
            value4: [1],
            renderFunc(h, option) {
                return <span>{ option.key } - { option.label }</span>;
            },
        };
    },

    created() {
        this.getTimer();
        setInterval(this.getTimer, 1000);
        this.getTimeHours();
    },

    methods: {
        getTimer() {
            var time = new Date();
            var year = time.getFullYear();
            var month = time.getMonth() + 1;
            var dates = time.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = time.getDay();
            var h = time.getHours();
            h = h < 10 ? '0' + h : h;
            var m = time.getMinutes();
            m = m < 10 ? '0' + m : m;
            var s = time.getSeconds();
            s = s < 10 ? '0' + s : s;
            this.logTimehms = h + ':' + m + ':' + s;
            this.logDate = year + '年' + month + '月' + dates + '日' + arr[day] + h + ':' + m + ':' + s;
        },
        handleChange(value, direction, movedKeys) {
            console.log(value, direction, movedKeys);
        },
        getTimeHours() {
            let time = new Date();
            this.timeOfTheday.push(time.getHours());
        },
    }
};
</script>

<style lang="less" scoped>
@keyframes show {
    0% {
        width: 0;
    }
    100% {
        width: 640px;
    }
}

p {
    font-size: 25px;
    color: rgb(255, 131, 127);
    width: 0;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    animation: show 4s steps(16) forwards;
}

.logDates {
    font-size: 20px;
    color: rgb(255, 131, 127);
}

.logTime {
    position: absolute;
    right: 25px;
    top: 108px;
    display: inline-block;
    height: 30px;
    line-height: 30px;
    color: red;
    font-size: 25px;
    font-weight: 700;
}

@media screen and (min-width: 1260px) {
    .logTime {
        display: none;
    }
    .logTimes {
        display: inline-block;
    }
}

@media screen and (min-width: 960px) {
    .logDates {
        visibility: hidden;
    }
}

@media screen and (max-width: 960px) {
    .logTime {
        display: none;
    }
    .logDates {
        visibility: visible;
    }
}



.el-calendar {
    position: absolute;
    right: 25px;
    top: 80px;
    width: 400px;
    background-color: #005AAB;
}

@media screen and (max-width: 1260px) {
    .el-calendar {
        visibility: hidden;
    }
    .logTimes {
        display: none;
    }
}

.el-calendar .el-calendar__body .el-calendar-table .el-calendar-day {
    box-sizing: border-box;
    line-height: 50px;
    padding: 8px;
    height: 50px;
    text-align: center;
}

.welcomeBody {
    min-height: 590px;
}

</style>